<template>
<div>
   <div v-for="(item,index) in chartList" :key="index" class="osm">
	<div :id="`chart${index}`" style="width:300px; height:100px;margin-bottom: 16px;float: right;">
	</div>
</div>

</div>

</template>
<script>
  export default {
  data() {
      return {}
    },
  mounted:{

  },
methods:{
drawAllCharts() {



  const _this=this
        //获取回答数据，res[],num,stitle
        axios({
            url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
            method:'get',
        }).then(function(resp){
            console.log('444'+resp)
            const data1=JSON.stringify(resp.data.data)
            console.log('333'+typeof(data1))
            const jsonObj =JSON.parse(data1)
            var arr=[];
            for(let i in jsonObj){
                arr.push(jsonObj[i])
            }
            console.log('222'+typeof(arr))
            console.log('111'+data1)

        })  
    this.chartList = this.tableData.data //从后台获取数据
    if (this.chartList.length > 0) {
        this.$nextTick(() => {
            this.initChart()
        })
    }
},
initChart() {
      this.chartList.forEach((val, index) => {
        const chart = new G2.Chart({
          container: `chart${index}`,
          width: 300,
          height: 100
        })
        chart.data(this.chartList)
        chart.coordinate().transpose().scale(1, -1)
        chart
          .interval()
          .position('task*range')
          .color('status', ['#2FC25B', '#F04864'])
        chart.render()
      })
    }

}

  }

</script>   
